<template>
  <div class="bottom-right">
    <div class="outer-container">
      <div class="inner-container">
        <div
            v-for="(circle, index) in circles"
            :key="index"
            :style="getCircleStyle(index)"
            class="circle-dot"
        >
          <div class="item-inner">
            <div class="icon">
              <img :src="circle.icon" alt="">
            </div>
            <div class="content">
              <div class="title">{{ circle.nickName || null }}</div>
              <div class="text">
                <span>{{ circle.habits }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getNum} from "@/utils/number";
import {getAllUser} from "@/api/apiFox";

export default {

  data() {
    return {
      circles: [], // 创建30个小圆
    };
  },
  methods: {
    getNum,
    // 动态计算每个小圆的位置和延迟
    getCircleStyle(index) {
      // 随机位置
      const randomLeft = Math.random() * 100 + "%"; // 随机水平位置
      // 随机延迟
      const randomDelay = Math.random() * 2 + "s"; // 随机延迟时间
      // 随机动画时长
      const randomDuration = Math.random() * 3 + 5 + "s"; // 随机动画持续时间
      return {
        left: randomLeft,
        animationDelay: randomDelay,
        animationDuration: randomDuration,
      };
    },
    // getList(){
    //   this.circles= [
    //     {id:1,name:'LISA',amount:'性格活泼，大方好动'},
    //     {id:2,name:'张文文',amount:'性格活泼，大方好动'},
    //     {id:3,name:'李思思',amount:'性格活泼，大方好动'},
    //     {id:4,name:'王笑笑',amount:'性格活泼，大方好动'},
    //     {id:5,name:'张三说',amount:'性格活泼，大方好动'},
    //     {id:6,name:'李三无',amount:'性格活泼，大方好动'},
    //     {id:7,name:'张二狗',amount:'性格活泼，大方好动'},
    //     {id:8,name:'李二狗',amount:'性格活泼，大方好动'},
    //     {id:9,name:'李思思',amount:'性格活泼，大方好动'},
    //     {id:10,name:'张二狗',amount:'性格活泼，大方好动'},
    //     {id:11,name:'李二狗',amount:'性格活泼，大方好动'},
    //     {id:12,name:'李思思',amount:'性格活泼，大方好动'},
    //     {id:13,name:'王笑笑',amount:'性格活泼，大方好动'},
    //     {id:14,name:'王三位',amount:'性格活泼，大方好动'},
    //     {id:15,name:'吾桑',amount:'性格活泼，大方好动'},
    //     {id:16,name:'斯巴达克斯',amount:'性格活泼，大方好动'},
    //     {id:21,name:'LISA',amount:'性格活泼，大方好动'},
    //     {id:22,name:'张文文',amount:'性格活泼，大方好动'},
    //     {id:23,name:'李思思',amount:'性格活泼，大方好动'},
    //     {id:24,name:'王笑笑',amount:'性格活泼，大方好动'},
    //     {id:25,name:'张三说',amount:'性格活泼，大方好动'},
    //     {id:26,name:'李三无',amount:'性格活泼，大方好动'},
    //     {id:27,name:'张二狗',amount:'性格活泼，大方好动'},
    //     {id:28,name:'李二狗',amount:'性格活泼，大方好动'},
    //     {id:29,name:'李思思',amount:'性格活泼，大方好动'},
    //     {id:102,name:'张二狗',amount:'性格活泼，大方好动'},
    //     {id:121,name:'李二狗',amount:'性格活泼，大方好动'},
    //     {id:122,name:'李思思',amount:'性格活泼，大方好动'},
    //     {id:132,name:'王笑笑',amount:'性格活泼，大方好动'},
    //     {id:142,name:'王三位',amount:'性格活泼，大方好动'},
    //     {id:152,name:'吾桑',amount:'性格活泼，大方好动'},
    //     {id:162,name:'斯巴达克斯',amount:'性格活泼，大方好动'},
    //   ]
    // },

    getArray(){
      getAllUser({role:2,pageSize:30,pageNum:1}).then(res=>{
        console.log(res)
        this.circles = res.list
        console.log(this.circles)
      }).catch(err=>{})
    }
  },
  mounted() {
    this.getArray()
  }
};
</script>



<style scoped lang="scss">
.bottom-right{
  height: 100%;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
  .item{
    display: flex;
    align-items: center;

    margin-bottom: 22px;
    &:nth-child(2n-1) {
      justify-content: space-between;
    }
    &:nth-child(2n) {
      justify-content: center;
    }
  }
}
/* 定义变量 */
//$outer-size: 300px; // 大容器尺寸
//$circle-size: 20px; // 小圆尺寸
//$outer-bg: #f3f3f3; // 大容器背景色
//$circle-bg: rgba(255, 0, 0, 0.6); // 小圆背景色
$animation-duration:18s; // 默认动画时长
$max-random-delay:18s; // 最大随机延迟
$animation-ease: ease-in-out; // 动画缓动方式

.item-inner{
  position: relative;
  display: flex;
  height: 60px;
  width: 350px;
  align-items: center;

  color:var(--colorTip);
  .title {
    font-size: 12px;
    padding-bottom: 5px;
    //margin-bottom: 5px;
    //border-bottom: 1px solid #fff;
  }
  .icon{
    margin-top: 15px;
    position: absolute;
    width: 170px;
    margin-right: 7px;
    img{
      height: 35px;
      width: 35px;
      object-fit: cover;
      border-radius: 50%;
    }
  }
  .content{
    margin-left: 40px;
    font-size: 12px;
    font-weight: 600;
    .title{
      margin-top: 10px;
      font-size: 14px;
      margin-bottom: -10px;
    }
    .text{
      font-size: 12px;
    }
  }
  span{
    font-size: 14px;
    margin-right: 5px;
  }
}
/* 大容器样式 */
.outer-container {
  width: 800px;
  //background: red;
  height: 600px;
  //background-color: $outer-bg;
  //border: 2px solid #ccc;
  position: relative;
  overflow: hidden;
  //margin: 50px auto;
  border-radius: 10px;
  display: flex;
  margin-left: -10px;
  justify-content: left;
  align-items: center;
}

/* 小圆样式 */
.circle-dot {
  position: absolute;
  bottom: -50px; // 初始位置在容器底部外
  //width: $circle-size;
  //height: $circle-size;
  //background-color: $circle-bg;
  //border-radius: 50%;
  margin-bottom: 20px;
  opacity: 0;
  animation: bubble $animation-duration $animation-ease infinite;
}

/* 冒泡动画 */
@keyframes bubble {
  0% {
    transform: translateY(0) scale(1); // 起始位置
    opacity: 1;
  }
  100% {
    transform: translateY(-800px) scale(1); // 顶部消失，升高200px
    opacity: 0.2;
  }
}
</style>
